<template>
    <div class="demo">
        <div class="panel">
            <div class="panel-head">
                <div class="panel-head-l">打开新Tab</div>
            </div>
            <div class="panel-body">
                <!-- TODO 待修改 -->
                <!--<div class="demo-line">
                    <el-tag class="demo-tag">参数code和component必传，对应的值在菜单数据（public\_json\frame\oms\findAmsDTOByPersonid.json） 中查找</el-tag><br />
                    <el-tag class="demo-tag">code与已打开页面code相同，则不打开tab，而是切换到对应tab</el-tag>
                </div>
                <el-button type="success"
                           class="demo-btn"
                           @click="fOpenNewTab">打开上传Demo</el-button><br />-->

                <div class="demo-line">
                    <el-tag class="demo-tag">打开标签页时，通过 data 传参</el-tag>
                </div>
                <el-button type="success"
                           class="demo-btn"
                           @click="fOpenOtherMenuClick">打开新标签页并传参</el-button><br />
            </div>
        </div>
        <div class="panel">
            <div class="panel-head">
                <div class="panel-head-l">关闭Tab</div>
            </div>
            <div class="panel-body">
                <el-tag class="demo-tag">传入需要关闭的tab的code，即可关闭tab</el-tag><br />
                <el-tag class="demo-tag">从props可以获取当前tab的code</el-tag><br />
                <el-button type="success"
                           class="demo-btn"
                           @click="fCloseClick">关闭当前tab</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: [
            'tab',//框架传入的标签页配置
        ],
        data() {
            return {
                //nTestNum: 1,TODO 待修改
            };
        },
        mounted() {
            //this.$EventBus.$on('tab-change', this.fTabChange);//监听 tab 切换
        },
        beforeDestroy() {
            //this.$EventBus.$off('tab-change', this.fTabChange);
        },
        methods: {
            //框架页 tab 切换事件
            //fTabChange(oNewTab) {
            //    if (oNewTab.code === this.tab.code) {
            //        console.log('index-tab 被激活');
            //    }
            //},
            //关闭当前标签页
            fCloseClick() {
                this.$EventBus.$emit('tab-remove', this.tab.code);
            },
            //打开其他菜单指定的标签页
            fOpenOtherMenuClick() {
                this.$EventBus.$emit('tab-add', {
                    code: 'DEMO-FORM',//需要与后端配的菜单code一致
                    name: '表单',
                    data: {//自定义参数，即将打开的标签页中，通过 props:tab.data 接收参数
                        name: '来自其他标签页'
                    }
                });
            },
            //打开不在菜单中的标签页 TODO 待修改
            //fOpenNewTab() {
            //    this.$EventBus.$emit('tab-add', {
            //        code: 'DEMO-FORM_' + this.nTestNum,
            //        name: '测试表单' + this.nTestNum,
            //        router: 'demo/form.vue',//需要与注册路径一致
            //        data: {
            //            name: '测试' + this.nTestNum,
            //        }
            //    })
            //},
        }
    };
</script>

<style lang="less" rel="stylesheet" scoped>
    .demo-line {
        padding: 10px 0;
    }
</style>